<script>
export default {
  name: "Archive",
  data() {
    return {
      currentPage: 1,
      size: 8,
      total: 0,
      archiveQuestionList:[]
    }
  },
  created() {
    this.getArchiveQuestionList()
  },
  methods: {
    getArchiveQuestionList() {
      this.request.get('/question/front/findArchiveQuestionList/' + `${this.currentPage}` + "/" + `${this.size}`)
          .then(res => {
            this.total=res.count
            this.archiveQuestionList=res.archiveQuestionList
          })
    },
    handleSizeChange(val) {
      this.size = val
      this.getArchiveQuestionList();


    },
    // 当前页
    // 当前页
    handleCurrentChange(val) {
      this.currentPage = val; // 确保更新 currentPage 的值
      this.getArchiveQuestionList();


    },
    formatDate(dateString) {
      const date = new Date(dateString);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    openDetailPage(id) {
      // 调用后端接口更新浏览次数
      this.request.get(`/question/front/updateBrowseNumber/${id}`)
          .then(res => {
            console.log('浏览次数更新成功');
            // 成功后再跳转到详情页
            this.$router.push(`/questionDetail/${id}`);
          })
          .catch(error => {
            console.error('浏览次数更新失败', error);
            // 即使更新失败也允许跳转（可根据实际需求调整）
            this.$router.push(`/questionDetail/${id}`);
          });
    }
  }
}
</script>

<template>
  <div class="animate__animated animate__fadeInLeftBig">
    <div class="question_title">
      <h2>试题归档</h2>
    </div>
    <!-- 添加一个新的容器来包裹所有的question-card -->
    <div class="question-cards-container">
      <div class="question-card" v-for="item in archiveQuestionList" :key="item.id" @click="openDetailPage(item.id)">
        <img :src="item.questionHover" alt="">
        <span style="margin-left: 2px">{{item.questionTitle}}</span>
        <span class="date">{{formatDate(item.createTime)}}</span>
      </div>
    </div>
    <div class="pagination-container">
      <el-pagination
          big
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :total="total"
          :current-page="currentPage"
          :page-size="size"
          class="mt-4"
      />
    </div>
  </div>
</template>


<style scoped>
.question_title {
  background-color: #fff;
  padding: 2.5px 5px; /* 增加内边距以适应文字 */
  text-align: center;
  width: 200px;
  border-radius: 10px;
  margin-left: 710px;
  display: inline-block; /* 使背景仅围绕文本 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 添加轻微阴影效果 */
}

.question-cards-container {
  display: flex; /* 启用flex布局 */
  flex-wrap: wrap; /* 允许元素在必要时换行 */
  justify-content: center; /* 水平居中显示 */
  gap: 20px; /* 设置元素之间的间隙 */
}

.question-card {
  width: calc(20% - 20px); /* 调整宽度，减去的20px是为了补偿间隙的影响 */
  height: auto; /* 根据内容调整高度 */
  margin: 20px auto;
  background-color: #fff;

  padding: 15px;
  font-size: 18px;
  border-radius: 15px; /* 根据需要调整圆角大小 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 6px 20px rgba(0,0,0,0.1);
  display: flex;
  cursor: pointer;
  flex-direction: column; /* 改变布局方向以适应内容 */
  justify-content: center; /* 垂直居中内容 */
  align-items: center; /* 水平居中内容 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.question-card img {
  width: 80%; /* 调整图片占卡片的比例，根据需要修改 */
  height: auto;
  margin-bottom: 15px; /* 与标题之间的间距 */
  border-radius: 10px;
}

.question-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0,0,0,0.2), 0 12px 22px rgba(0,0,0,0.2);
}

.date {
  padding: 2px 10px;
  background-color: orange;
  color: #fff;
  font-size: 16px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.pagination-container {
  text-align: center;
  margin-top: 20px;
  width: 100%;
}


/* 可能需要根据实际情况调整@media查询以适应不同的屏幕尺寸 */
@media (max-width: 1200px) {
  .question-card {
    width: calc(33.333% - 20px); /* 在较小屏幕上调整为三列布局 */
  }
}

@media (max-width: 768px) {
  .question-card {
    width: calc(50% - 20px); /* 在更小屏幕上调整为两列布局 */
  }
}

@media (max-width: 480px) {
  .question-card {
    width: 100%; /* 在最小屏幕上调整为单列布局 */
  }
}
</style>
